import React from 'react'
import {withRouter} from 'react-router-dom'
import '../GameCarousel.css'
import './GameCarouselItem.css'
import OnLiveIcon from "../../../../../../../res/images/web/GameCaroulsItem/in@2x.png"
import SmallPlayBtnPink from "../../../../../../../res/images/web/GameCaroulsItem/little triangle red@2x.png"
import {formatDate, formatScheduleDate, getDifferenceBetweenDates} from "../../../../../../../utils/dateService"
import constants from "../../../../../../../utils/constants";

const GameCarouselItem = props => {
    const {
        game,
        history,
    } =  props
    if (game === null) return null

    const {
        matchId,
        // eventId,
        status,
        schedule,
        startAt,
        homeTeam,
        awayTeam,
        // gameInfo,
        // seasonInfo,
        // stageInfo,
        event,
        // stage,
    } = game


    // 比赛状态判断条件
    // const isEarly = status === 1
    // const isStarted = status >= 2 && status <= 7
    // const isFirstHalf = status === 2
    // const isHalfTime = status === 3
    // const isSecondHalf = status === 4
    // const isFinished = status === 8
    // const isDelay = status >= 9

    // const startAtTimeObj = new Date(startAt * 1000)
    // const now = new Date()
    // const diff = getDifferenceBetweenDates(startAtTimeObj, now)

    // const cTimeStyle = {
    //     color: !isEarly  ? `${constants.themeColor}` : '#ddd',
    // }
    // console.log(event)
    const competitionName = event.short_name_zh
    let scheduleTime = formatScheduleDate(new Date(schedule * 1000))
    let date = formatDate(new Date(schedule * 1000))
    // let curTime
    // if (isEarly) curTime = '未开赛'
    // if (isFirstHalf) curTime = `上半场 ${diff.minutesDiff + 1}\'`
    // if (isHalfTime) curTime = '半场 45\''
    // if (isSecondHalf) curTime = `下半场 ${diff.minutesDiff + 45 + 1}\'`

    // players template
    const homeTeamDetail = homeTeam.detail
    const awayTeamDetail = awayTeam.detail
    const homeTeamName = homeTeamDetail.name_zh
    // const homeScore = homeTeam.teamScore
    const awayTeamName = awayTeamDetail.name_zh
    // const awayScore = awayTeam.teamScore
    // const homeRedCard = homeTeam.red
    // const homeYellowCard = homeTeam.yellow
    // const awayRedCard = awayTeam.red
    // const awayYellowCard = awayTeam.yellow

    // 小怪兽图标是否出现
    // const OnLiveIconTemplate = (
    //     <div className='game-carousel-onlive-icon'>
    //         <img src={OnLiveIcon} alt='' style={{width: 31, height: 20,}}/>
    //     </div>
    // )
    // 按钮状态

    // const cTime = formatDate(new Date(schedule * 1000))
    // const formatSchedule = new Date(schedule* 1000)
    //     .toString()
    //     .split(' ')[4]
    //     .slice(0, 5)

    // const statusContent = (
    //     isStarted ?
    //         <span style={{color: '#fff'}}>
    //                     <span style={{padding: '4px',}}>直播中</span>
    //                     <img src={SmallTriangle} alt=''/>
    //                 </span>
    //         : <span>{scheduleTime}</span>
    // )
    //
    // const statusActiveCls = isStarted? 'game-carousel-play-btn-onlive' : ''

    // const statusTemplate = (
    //     <div
    //         className={`game-carousel-play-btn ${statusActiveCls}`}
    //     >
    //         <p
    //             className='game-carousel-play-btn-text'
    //         >
    //             {statusContent}
    //         </p>
    //     </div>
    // )

    // const grayStatusBg = {
    //     width: '54px',
    //     height: '16px',
    //     margin: '2px auto',
    //     borderRadius: '8px',
    //     backgroundColor: 'rgba(51,51,51,0.04)',
    // }
    //
    // const grayStatus = {
    //     fontSize: '10px',
    //     color: 'rgba(51,51,51,1)',
    // }
    //
    // const pinkStatusBg = {
    //     width: '54px',
    //     height: '16px',
    //     margin: '2px auto',
    //     borderRadius: '8px',
    //     backgroundColor: 'rgba(250,114,104,0.1)',
    // }
    //
    // const pinkStatus = {
    //     fontSize: '10px',
    //     color: 'rgba(250,114,104,1)',
    //     marginRight: '4px',
    // }

    // let statusText = ''
    // let statusTemplate
    // if (isFinished) {
    //     statusText = '已完赛'
    //     statusTemplate = <div
    //         className="flex-center-align-center"
    //         style={grayStatusBg}
    //     >
    //         <span style={grayStatus}
    //         >{statusText}</span>
    //     </div>
    // }

    // if (isStarted) {
    //     statusText = '直播中'
    //     statusTemplate = <div
    //         className="flex-center-align-center"
    //         style={pinkStatusBg}
    //     >
    //         <span style={pinkStatus}>{statusText}</span>
    //         <img src={SmallPlayBtnPink} alt='' style={{width: 6, height: 6,}}/>
    //     </div>
    // }

    // if (isDelay) {
    //     statusText = '延期'
    //     statusTemplate = <div
    //         className="flex-center-align-center"
    //         style={grayStatusBg}
    //     >
    //         <span style={grayStatus}
    //         >{statusText}</span>
    //     </div>
    // }

    // if (isEarly) {
    //     statusTemplate = <div
    //         className="flex-center-align-center"
    //         style={grayStatusBg}
    //     >
    //         <span style={grayStatus}
    //         >{scheduleTime}</span>
    //     </div>
    // }

    // const titleTemplate = (
    //     <>
    //         <div>
    //             <p className='game-carousel-category'>
    //                 {competitionName}
    //             </p>
    //
    //             {statusTemplate}
    //
    //             {/*<div*/}
    //             {/*    className="flex-center-align-center"*/}
    //             {/*    style={grayStatusBg}*/}
    //             {/*>*/}
    //             {/*    <span*/}
    //             {/*        style={grayStatus}*/}
    //             {/*    >{scheduleTime}</span>*/}
    //             {/*</div>*/}
    //         </div>
    //
    //         <p className='game-carousel-title'>
    //             {/*{val.title}: {val.players.p1.name} vs {val.players.p2.name}*/}
    //             {homeTeamName} vs {awayTeamName}
    //         </p>
    //     </>
    // )





    // const onLiveTemplate = (
    //     <>
    //         <div>
    //             <p className='game-carousel-category'>
    //                 {competitionName}
    //             </p>
    //             {/*<div*/}
    //             {/*    className="flex-center-align-center"*/}
    //             {/*    style={pinkStatusBg}*/}
    //             {/*>*/}
    //             {/*    <span style={pinkStatus}>{statusText}</span>*/}
    //             {/*    <img src={SmallPlayBtnPink} alt='' style={{width: 6, height: 6,}}/>*/}
    //             {/*</div>*/}
    //             {statusTemplate}
    //         </div>
    //
    //         <div className='game-carousel-scores'>
    //             <div className='game-carousel-player'>
    //                 <div className='game-carousel-player-name'>
    //                     {homeTeamName}
    //                 </div>
    //                 <div
    //                     className={homeScore > awayScore ? 'game-carousel-player-score-winning' : 'game-carousel-player-score-losing'}
    //                 >
    //                     {homeScore}
    //                 </div>
    //             </div>
    //             <div className='game-carousel-player'>
    //                 <div className='game-carousel-player-name'>
    //                     {awayTeamName}
    //                 </div>
    //                 <div
    //                     className={awayScore > homeScore ? 'game-carousel-player-score-winning' : 'game-carousel-player-score-losing'}
    //                 >
    //                     {awayScore}
    //                 </div>
    //             </div>
    //         </div>
    //     </>
    // )

    // const carouselItemCls = `game-carousel-item ${isStarted? 'game-carousel-item-onlive' : ''}`
    // const carouselItemCls = `game-carousel-item-ver`

    // const AIBtn = (
    //     <div
    //         id='ai'
    //         style={{zIndex: 2,}}
    //         className='flex-center-align-center game-carousel-play-btn game-carousel-play-btn-onlive'
    //         onClick={(e) => goToGame(e)}
    //     >
    //         {/*<img src={SmallAIBtn} alt='' style={{marginRight: '8px',}} id='ai'/>*/}
    //         <span
    //             className='game-carousel-play-btn-text'
    //             id='ai'
    //         >
    //             小应预测
    //         </span>
    //     </div>
    // )

    function goToGame(e, AIBtnClick) {
        e.stopPropagation()
        history.push(`./game/${matchId}`, {matchId, status, AIBtnClick: AIBtnClick, date})
    }

    return (
        <div
            // className={carouselItemCls}
            className='game-carousel-item-ver flex-space-between-align-center'
            onClick={(e) => goToGame(e,false)}
        >
            {/*{titleTemplate}*/}
            {/*{isStarted || isFinished ? onLiveTemplate : titleTemplate}*/}
            {/*{statusTemplate}*/}
            {/*{AIBtn}*/}

            <div>
                <div style={{marginBottom: '4px',}}>
                    <span className='gray-text'>{competitionName}</span>
                    <span className='gray-text'>今天 {scheduleTime}</span>
                </div>
                <div style={{
                    fontSize: '16px',
                    color: 'rgba(51,51,51,1)',
                    lineHeight: '18px',
                    fontWeight: 600,
                }}
                >
                    <span>{homeTeamName}</span> <span>vs</span> <span>{awayTeamName}</span>
                </div>
            </div>

            <div className='game-carousel-item-yuche-btn' onClick={(e) => goToGame(e,true)}>
                <span>小应分析</span>
            </div>



        </div>
    )

    // return (
    //     <div
    //         className='game-carousel'
    //         onClick={(e) => goToGame(e)}
    //     >
    //         {isStarted ? OnLiveIconTemplate : null}
    //         <div
    //             className={carouselItemCls}
    //         >
    //             {isStarted || isFinished ? onLiveTemplate : titleTemplate}
    //             {/*{statusTemplate}*/}
    //             {AIBtn}
    //         </div>
    //     </div>
    // )
}

export default withRouter(GameCarouselItem)
